<template>
  <div class="login">
    <div class="box">
      <h1 align="center" style="margin-top: 20px; margin-bottom: 50px">
        <strong>积云舆情监控后台管理系统</strong>
      </h1>
      <p style="margin-top: 30px; margin-left: 100px">
        <strong>用户名 : </strong
        ><a-input
          style="width: 300px"
          v-model:value="username"
          placeholder="请输入用户名"
        />
      </p>
      <p style="margin-top: 30px; margin-left: 100px">
        <strong>密&emsp;码 : </strong
        ><a-input-password
          style="width: 300px"
          v-model:value="password"
          placeholder="请输入密码"
        />
      </p>
      <p style="margin-top: 30px; margin-left: 100px">
        <strong>验证码 : </strong
        ><a-input
          style="width: 150px; margin-right: 15px"
          v-model:value="verify"
          placeholder="请输入验证码"
        />
        <i class="verify" @click="getCaptcha" v-html="svgImg"></i>
      </p>
      <a-button
        type="primary"
        style="margin-top: 30px; margin-left: 180px"
        @click="submit"
        >登录</a-button
      >
    </div>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import userApi from "../../api/user";
import {useThrottle} from "../../hook/useThrottle";
import { message } from 'ant-design-vue';
import {useStore} from "vuex";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    // 获取storage对象
    let storage = useStore();
    // 获取路由对象
    let router = useRouter();


    let state = reactive({
      username: "",
      password: "",
      verify: "",
      svgKey: "",
    });
    let svgImg = ref("");


    let getCaptcha = () => {
      userApi.getCaptcha().then((res: any) => {
        console.log(res);
        svgImg.value = res.data.svgImg;
        state.svgKey = res.data.svgKey;
      });
    };
    onMounted(() => {
      getCaptcha();
    });



    let doLogin = () => {
      userApi.doLigin(state).then((res: any) => {
        console.log(res);
        if(res.data.success){
          // 获取登陆成功之后的token
          let {token} = res.data.result;
          storage.dispatch("setChangeToken",token);
          storage.dispatch("setChangeUserInfo",res.data.result)
          // 登录成功提示
          message.success(res.data.message);
          router.push({
            path : '/'
          })
        }else{
          message.error(res.data.message);
        }
      });
    };

    let submit = useThrottle(doLogin,1000);

    return {
      ...toRefs(state),
      svgImg,
      getCaptcha,
      submit,
    };
  },
});
</script>

<style scoped >
.login {
  width: 100%;
  height: 100%;
  background-color: steelblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 800px;
  height: 400px;
  background-image: url("../../assets/loginbg.jpg");
  background-size: 100% 100%;
}
.verify {
  float: right;
  position: relative;
  top: -15px;
  left: -330px;
}
</style>
